import React, { useRef, useEffect } from 'react'
import * as echarts from 'echarts'

export default function GoodsStatistics() {
  const goodsChartRef = useRef(null);
  let myChart = null;
  useEffect(() => {
    //获取dom节点
    myChart = echarts.init(goodsChartRef.current);
    //配置项
    var option = {
      //标题
      title: {
        text: '数据统计'
      },
      // 鼠标放上去显示数据
      tooltip: {
        trigger: 'axis'
      },
      //图例 数据展示分类
      legend: {
        data: ['热销榜', '新品展示', '炒饭系列', '千万销量', '营养适配', '满减专区', '冒菜', '海鲜自助', '小吃']
      },
      // 布局
      grid: {
        left: '3%',
        right: '4%',
        bottom: '3%',
        containLabel: true
      },
      // 可下载
      toolbox: {
        feature: {
          saveAsImage: {}
        }
      },
      //x轴 坐标数据
      xAxis: {
        type: 'category',
        boundaryGap: false,//x轴坐标轴两边留白策略
        data: ['2-17', '2-18', '2-19', '2-20', '2-21', '2-22', '2-23', '2-24']
      },
      yAxis: {
        type: 'value',
        data: [1000, 2000, 3000, 4000, 5000, 6000, 7000]
      },
      //数据
      series: [
        {
          name: '热销榜',//图例名称
          data: [120, 132, 101, 134, 90, 230, 210, 300, 400,],
          type: 'line'//类型：折线图
        },
        {
          name: '新品展示',
          data: [220, 182, 191, 234, 290, 330, 310, 400, 500],
          type: 'line'
        },
        {
          name: '炒饭系列',
          data: [150, 232, 201, 154, 190, 330, 410, 400, 500],
          type: 'line'
        },
        {
          name: '千万销量',
          data: [320, 332, 301, 334, 390, 330, 320, 400, 500],
          type: 'line'
        },
        {
          name: '营养适配',
          data: [820, 932, 901, 934, 1290, 1330, 1320, 1500, 2000],
          type: 'line'
        },
        {
          name: '满减专区',
          data: [120, 132, 101, 134, 90, 230, 210, 400, 500],
          type: 'line'
        },
        {
          name: '冒菜',
          data: [220, 182, 191, 234, 290, 330, 310, 400, 500],
          type: 'line'
        },
        {
          name: '海鲜自助',
          data: [150, 232, 201, 154, 190, 330, 410, 400, 500],
          type: 'line'
        },
        {
          name: '小吃',
          data: [320, 332, 301, 334, 390, 330, 320, 400, 500],
          type: 'line'
        },
      ]
    }
    //初始化echarts实例 生成图
    myChart.setOption(option);
    // 使用刚指定的配置项和数据显示图表。
    option && myChart.setOption(option);

    // 实现 echarts 自适应
    const onResize = () => {
      myChart.resize();
    };
    // 监听窗口大小变化
    window.addEventListener('resize', onResize);

    // 销毁周期 消除事件监听
    return () => {
      window.removeEventListener('resize', onResize);
      myChart.dispose();
    };
  }, [])
  return (
    <div id='goodsStatistics' ref={goodsChartRef} style={{ width: '100%', height: '100%' }}></div>
  )
}
